<div class="page-title">
    <img src="svg_img/system_black.svg">
    <h1 data-trans="usb_port"></h1>
</div>
<div id="innerContainer">
    <div class="limit-container">
        <form id="usbPortForm">
            <div class="content">
                <div class="row mb-3">
                    <label class="col-8 col-md-4 col-sm-6 side-right" data-trans="usb_port"></label>
                    <div class="col-3 form-switch">
                        <input class="form-check-input" type="checkbox" name="usbPortSwitch" id="usbPortSwitch"
                            data-bind="checked : usbPortSwitch, click: setUsbPortSwitch" />
                    </div>
                </div>
                
                <!-- ADB网络端口输入框 -->
                <div class="row mb-3">
                    <label class="col-md-4 col-form-label" for="adbPortInput">ADB网络端口</label>
                    <div class="col-md-6 col-12">
                        <input type="number" id="adbPortInput" class="form-control" min="0" max="65535">
                        <label id="adbPortInput-error" class="error" for="adbPortInput" style="display: none;">请输入有效的端口号</label>
                    </div>
                </div>
                
                <!-- 安全的ADB网络端口输入框 -->
                <div class="row mb-3">
                    <label class="col-md-4 col-form-label" for="secureAdbPortInput">安全的ADB网络端口</label>
                    <div class="col-md-6 col-12">
                        <input type="number" id="secureAdbPortInput" class="form-control" min="0" max="65535">
                        <label id="secureAdbPortInput-error" class="error" for="secureAdbPortInput" style="display: none;">请输入有效的端口号</label>
                    </div>
                </div>
            </div>
            
            <!-- 应用按钮 -->
            <div class="form-buttons">
                <div>
                    <input type="button" class="btn btn-primary" value="应用" onclick="applySettings()" />
                </div>
            </div>
            <div class="form-note">
                <div class="notes-title">&nbsp;</div>
                <ul class="notes-content">
                    <li>安全的ADB网络端口：</li>
                    <ul>
                    <li>由于F50的ADB缺乏鉴权机制，任何设备都能连接，而IPv6通常具有公网访问能力，容易被其他人连接。</li>
                    <li>为保障安全，通过设置防火墙来阻止IPv6对ADB网络端口的访问，并利用本后台进行代理。</li>
                    <li>在IPv6环境下，只有登录本后台后，才能通过安全的ADB网络端口进行连接。</li>
                    </ul>
                </ul>
            </div>
        </form>
    </div>
</div>

<script>
$(document).ready(function() {
    // 页面加载时获取当前ADB端口设置
    $.get('/atwat/adbPort', function(data) {
        $('#adbPortInput').val(data.adbPort);
        $('#secureAdbPortInput').val(data.adbPortSafe);
    }).fail(function(error) {
        console.error('获取ADB端口设置失败:', error);
    });
});

function applySettings() {
    // 获取输入框中的值
    const adbPort = $('#adbPortInput').val();
    const secureAdbPort = $('#secureAdbPortInput').val();
    
    // 验证端口号
    if (!validatePort(adbPort)) {
        $('#adbPortInput-error').show();
        return;
    }
    if (!validatePort(secureAdbPort)) {
        $('#secureAdbPortInput-error').show();
        return;
    }
    
    // 发送POST请求更新设置
    $.post('/atwat/adbPortSet', JSON.stringify({
        adbPort: parseInt(adbPort),
        adbPortSafe: parseInt(secureAdbPort)
    }), function(data) {
        console.log('设置成功:', data);
        // 可以在这里添加成功提示
    }).fail(function(error) {
        console.error('设置失败:', error);
        // 可以在这里添加错误提示
    });
}

function validatePort(port) {
    return port !== '' && !isNaN(port) && port >= 1 && port <= 65535;
}

function showError(errorId) {
    $('#' + errorId).show();
}
</script>